<template>
  <ChartWrapper>
    <div ref="container" class="base-area">
    </div>
  </ChartWrapper>
</template>

<script>
import ChartWrapper from '@/components/ChartWrapper'
import { Chart } from '@antv/g2'

export default {
  name: 'TrendChart',
  props: {
    options: {
      type: Object,
      default: () => ({
        data: [
          { year: '1991', value: 23 },
          { year: '1992', value: 87 },
          { year: '1993', value: 34 },
          { year: '1994', value: 68 },
          { year: '1995', value: 25 },
          { year: '1996', value: 76 },
          { year: '1997', value: 54 },
          { year: '1998', value: 68 },
          { year: '1999', value: 21 }
        ],
        config: {
          x: 'year',
          y: 'value',
          drawColor: '#B34419'
        }
      })
    }
  },
  components: {
    ChartWrapper
  },
  methods: {
    drawChart () {
      const chart = new Chart({
        container: this.$refs.container,
        autoFit: true,
        padding: [30, 30, 30, 50]
      })

      chart.data(this.options.data)
      chart.scale({
        [this.options.config.y]: {
          min: 0,
          nice: true
        },
        [this.options.config.x]: {
          range: [0, 1]
        }
      })
      chart.tooltip({
        showCrosshairs: true,
        shared: true
      })

      chart.axis([this.options.config.x], false)
      // chart.axis([this.options.config.x], {
      //   label: {
      //     style: {
      //       fill: '#ffffff'
      //     }
      //   }
      // })
      chart.axis([this.options.config.y], {
        label: {
          style: {
            fill: '#ffffff'
          }
        },
        line: {
          style: {
            stroke: '#ffffff',
            strokeOpacity: 0.4
          }
        },
        grid: {
          line: {
            style: {
              stroke: '#ffffff',
              strokeOpacity: 0.2
            }
          }
        }
      })

      let position = `${this.options.config.x}*${this.options.config.y}`
      chart.area().style({ fill: `l(90) 0:${this.options.config.drawColor} 0.4:${this.options.config.drawColor} 1:#051B34`, fillOpacity: 0.5 }).position(position).shape('smooth')
      chart.line().style({ lineWidth: 3, stroke: this.options.config.drawColor }).position(position).shape('smooth')
      chart.point().style({ stroke: '#ffffff', fill: this.options.config.drawColor }).position(position).label(this.options.config.y, { style: { fill: '#ffffff' } })

      chart.render()
    }
  },
  mounted () {
    console.log(this.$refs);
    this.drawChart()
  }
}
</script>

<style lang="less" scoped>
.base-area {
  width: 100%;
  height: 100%;
}
</style>
